<!--1-36轴承配合设计及校核-->
<template>
  <div class="all">
    <a-row class="top-row">
      <a-col class="col-1" span="24">
        <div class="top">
          <div class="top-top">配合选取</div>
          <div class="top-mid">
            <span class="top-mid-left">负荷条件</span>
            <select class="top-mid-right" v-model="form.whether_inner_load">
              <option value="1">轴承内圈承受循环载荷</option>
              <option value="2">轴承外圈承受循环载荷</option>
            </select>
          </div>
          <div class="top-btm">
            <div class="top-btm-left">
              <div class="tool1">
                <ul class="top-left-left">
                  <li>额定静载荷(N)</li>
                  <li>径向载荷(N)</li>
                  <li>轴承内径(mm)</li>
                  <li>额定动载荷与当量动载荷比值</li>
                </ul>
              </div>
              <div class="tool2">
                <ul class="top-left-right">
                  <li><input v-model="form.C0" /></li>
                  <li><input v-model="form.Fr" /></li>
                  <li><input v-model="form.d" /></li>
                  <li>
                    <label>{{ dataSouce.ratio }}</label>
                  </li>
                </ul>
              </div>
            </div>
            <div class="top-btm-right">
              <div class="tool3">
                <ul class="top-right-left">
                  <li>额定动载荷(N)</li>
                  <li>当量动载荷(N)</li>
                  <li>轴承外径(mm)</li>
                </ul>
              </div>
              <div class="tool4">
                <ul class="top-right-right">
                  <li><input v-model="form.C" /></li>
                  <li><input v-model="form.P" /></li>
                  <li><input v-model="form.D" /></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row class="btm-row">
      <a-col class="col-2" span="24">
        <div class="btm">
          <div class="btm-top">配合校验</div>
          <div class="btm-mid">
            <div class="btm-mid-all">
              <div class="btm-mid-top">输入参数</div>
              <div class="btm-mid-mid">
                <div class="btm-mid-left">
                  <div class="tool5">
                    <ul
                        class="btm-left-left1"
                        v-show="form.whether_inner_load == 1"
                    >
                      <li>加工方法</li>
                      <li>轴承宽度(mm)</li>
                      <li>轴承内圈轨道直径(mm)</li>
                      <li></li>
                      <li>轴上偏差(mm)</li>
                      <li>轴下偏差(mm)</li>
                      <li>轴承内圈上偏差(mm)</li>
                      <li>轴承内圈下偏差(mm)</li>
                    </ul>
                    <ul
                        class="btm-left-left2"
                        v-show="form.whether_inner_load == 2"
                    >
                      <li>加工方法</li>
                      <li>轴承宽度(mm)</li>
                      <li>轴承内圈轨道直径(mm)</li>
                      <li></li>
                      <li>轴承外圈上偏差(mm)</li>
                      <li>轴承外圈下偏差(mm)</li>
                      <li>轴承座上偏差(mm)</li>
                      <li>轴承座下偏差(mm)</li>
                    </ul>
                  </div>
                  <div class="tool6">
                    <ul
                        class="btm-left-right1"
                        v-show="form.whether_inner_load == 1"
                    >
                      <li>
                        <select v-model="form.produce_method">
                          <option value="1">车</option>
                          <option value="2">磨</option>
                        </select>
                      </li>
                      <li><input v-model="form.B" /></li>
                      <li>
                        <div style="width: 100%;height: 100%;display: flex;font-size: 0">
                          <div style="width: 30%"> <label style="text-align: right;font-size: 14px">{{ dataSouce.de }}</label></div>

                            <input style="zoom: normal" v-model="form.whether_auto" type="radio" value="1" name="btn1" />
                          <label style="display: flex;font-size: 14px">自动</label>
                        </div>
                      </li>
                      <li>
                        <div style="width: 100%;height: 100%;display: flex;font-size: 0">
                          <div style="width: 30%"> <input style="width: 100%;font-size: 14px"
                              v-show="form.whether_auto == 2"
                              v-model="form.de" /></div>

                          <input style="zoom: normal" v-model="form.whether_auto" type="radio" value="2" name="btn1" />
                          <label style="display: flex;font-size: 14px">手动</label>
                        </div>
                      </li>
                      <li><input v-model="form.Ts_upper" /></li>
                      <li><input v-model="form.Ts_lower" /></li>
                      <li><input v-model="form.Tbi_upper" /></li>
                      <li><input v-model="form.Tbi_lower" /></li>
                    </ul>
                    <ul
                        class="btm-left-right2"
                        v-show="form.whether_inner_load == 2"
                    >
                      <li>
                        <select v-model="form.produce_method">
                          <option value="1">车</option>
                          <option value="2">磨</option>
                        </select>
                      </li>
                      <li><input v-model="form.B" /></li>
                      <li>
                        <div style="width: 100%;height: 100%;display: flex;font-size: 0">
                          <div style="width: 30%;font-size: 14px"> <label>{{ dataSouce.Di }}</label></div>
                          <input style="zoom: normal" v-model="form.whether_auto" type="radio" value="1" name="btn2" />
                          <label style="display: flex;font-size: 14px">自动</label>
                        </div>
                      </li>
                      <li>
                        <div style="width: 100%;height: 100%;display: flex;font-size: 0">
                          <div style="width: 30%"> <input style="width: 100%;font-size: 14px"
                              v-show="form.whether_auto == 2"
                              v-model="form.Di"/></div>
                          <input style="zoom: normal" v-model="form.whether_auto" type="radio" value="2" name="btn2" />
                          <label style="display: flex;font-size: 14px">手动</label>
                        </div>
                      </li>
                      <li><input v-model="form.Tbo_upper" /></li>
                      <li><input v-model="form.Tbo_lower" /></li>
                      <li><input v-model="form.Th_upper" /></li>
                      <li><input v-model="form.Th_lower" /></li>
                    </ul>
                  </div>
                </div>
                <div class="btm-mid-right">
                  <div class="tool7">
                    <ul
                        class="btm-right-left1"
                        v-show="form.whether_inner_load == 1"
                    >
                      <li>轴承类型</li>
                      <li>轴内径(mm)</li>
                      <li>轴承内圈温度(℃)</li>
                      <li>轴承内外圈温差(℃)</li>
                      <li>配合面温差与轴承内外圈温差比值</li>
                      <li>环境温度(℃)</li>
                      <li>轴承热膨胀系数(um/(m·℃))</li>
                      <li>轴热膨胀系数(um/(m·℃))</li>
                    </ul>
                    <ul
                        class="btm-right-left2"
                        v-show="form.whether_inner_load == 2"
                    >
                      <li>轴承类型</li>
                      <li>轴承座外径(mm)</li>
                      <li>轴承外圈温度(℃)</li>
                      <li>轴承内外圈温差(℃)</li>
                      <li>配合面温差与轴承内外圈温差比值</li>
                      <li>环境温度(℃)</li>
                      <li>轴承热膨胀系数(um/(m·℃))</li>
                      <li>轴承座膨胀系数(um/(m·℃))</li>
                    </ul>
                  </div>
                  <div class="tool8">
                    <ul
                        class="btm-right-right1"
                        v-show="form.whether_inner_load == 1"
                    >
                      <li>
                        <select v-model="form.bearing_type">
                          <option value="1">圆柱滚子轴承</option>
                          <option value="2">其他轴承</option>
                        </select>
                      </li>
                      <li><input v-model="form.di" /></li>
                      <li><input v-model="form.t_bin" /></li>
                      <li><input v-model="form.temp_in_out" /></li>
                      <li><input v-model="form.temp_ratio" /></li>
                      <li><input v-model="form.t_env" /></li>
                      <li><input v-model="form.a_shaft" /></li>
                      <li><input v-model="form.a_bearing" /></li>
                    </ul>
                    <ul
                        class="btm-right-right2"
                        v-show="form.whether_inner_load == 2"
                    >
                      <li>
                        <select v-model="form.bearing_type">
                          <option value="1">球轴承</option>
                          <option value="2">滚子轴承</option>
                        </select>
                      </li>
                      <li><input v-model="form.D" /></li>
                      <li><input v-model="form.t_bout" /></li>
                      <li><input v-model="form.temp_in_out" /></li>
                      <li><input v-model="form.temp_ratio" /></li>
                      <li><input v-model="form.t_env" /></li>
                      <li><input v-model="form.a_shaft" /></li>
                      <li><input v-model="form.a_house" /></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="btm-mid-btm" @click="check">
                <button>校核</button>
              </div>
            </div>
          </div>
          <div class="btm-btm">
            <div class="btm-btm-top">输出参数</div>
            <div class="btm-btm-btm">
              <div class="btm-btm-left">
                <ul>
                  <li>轴承平均过盈量(mm)</li>
                  <li>运行中实际所需过盈量(mm)</li>
                  <li>结论：</li>
                </ul>
              </div>
              <div class="btm-btm-right">
                <ul>
                  <li>
                    <label>{{ dataSouce.interference_mean }}</label>
                  </li>
                  <li>
                    <label>{{ dataSouce.delta_H }}</label>
                  </li>
                  <li>
                    <label>{{ dataSouce.conclusion }}</label>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {bearing} from "@/api/file";

export default {
  created () {
    document.title = '轴承配合设计及校核' //模块中文名
  },
  name: "moudule_bearing_fit",
  data() {
    return {
      form:{
        C0: 2220000,
        Fr: 125000,
        d: 340,
        D: 460,
        B: 76,
        di: 265,
        De: 265,
        de: 370,
        Di: 425,
        Ts_upper: 0.098,
        Tbo_upper: 0.098,
        Ts_lower: 0.062,
        Tbo_lower: 0.062,
        Tbi_upper: 0,
        Th_upper: 0,
        Tbi_lower: -0.04,
        Th_lower: -0.04,
        t_bin: 60,
        t_bout: 60,
        temp_in_out: 10,
        temp_ratio: 0.15,
        t_env: 20,
        a_bearing: 12,
        a_shaft: 12,
        a_house: 12,
        C: 1080000,
        P: 125000,
        whether_auto: 2,
        whether_inner_load: 1,
        produce_method: 1,
        bearing_type: 1,
      },
      dataSouce: {
        ratio: "static text",
        interference_mean: "static text",
        delta_H: "static text",
        de: "static text",
        Di: "static text",
        conclusion: "static text"
      }
    };
  },
  methods: {
    check() {
      bearing(this.form)
          .then(res => {
            console.log(res);
            // if (res.code === 200) {
            this.dataSouce.ratio = res[0];
            this.dataSouce.interference_mean=res[1];
            this.dataSouce.delta_H=res[2];
            this.dataSouce.de=res[3];
            this.dataSouce.Di=res[4];
            if (this.dataSouce.interference_mean >= this.dataSouce.delta_H) {
              this.dataSouce.conclusion = "所选配合合适";
            } else this.dataSouce.conclusion = "修正配合";
            // }
          })
          .catch(error => {
            console.log(error);
          });
    }
  }
};
</script>

<style scoped>
.automatic,
.Manual {
  position: absolute;
  right: 35%;
  margin-top: 1%;
  width: 20%;
}
input,
select {
  border-radius: 5px;
}
input {
  text-align: center;
  width: 40%;
}
.all {
  height: 100%;
  width: 100%;
}
.top-row {
  width: 100%;
  height: 35%;
}
.btm-row {
  width: 100%;
  height: 65%;
}
.col-1 {
  height: 100%;
}
.col-2 {
  height: 100%;
}
.top {
  width: 98%;
  height: 98%;
  margin-top: 1%;
  margin-left: 1%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
  border-radius: 3px;
}
.top-top {
  width: 100%;
  height: 10%;
  background-color: rgba(238, 238, 238, 1);
  border-radius: 5px;
}
.top-mid {
  width: 100%;
  height: 12%;
  position: relative;
}
.top-mid-left {
  position: absolute;
  left: 45%;
}
.top-mid-right {
  position: absolute;
  left: 50%;
}
.top-btm {
  height: 78%;
  width: 100%;
  position: relative;
}
.top-btm-left {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 0%;
}
.tool1,
.tool3,
.tool5,
.tool7 {
  width: 50%;
  height: 100%;
  position: relative;
  left: 0%;
}
.top-left-left,.top-right-left {
  position: absolute;
  right: 5%;
  height: 100%;
  width: 100%;
}
.top-left-left li,.top-right-left li {
  text-align: right;
  height: 20%;
  width: 90%;
}
.tool2,
.tool4,
.tool6,
.tool8 {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0%;
  top: 0%;
}
.top-left-right,.top-right-right {
  height: 100%;
}
.top-left-right li,.top-right-right li{
  height: 20%;
  text-align: center;
}
.top-btm-right {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0%;
}

.btm-left-right1, .btm-left-right2 {
  height: 100%;
  width: 100%;
  position: absolute;
}
.btm-left-right1 li,
.btm-left-right2 li {
  height: 12.5%;
  width: 100%;
  text-align: left;
}
.btm {
  width: 98%;
  margin-left: 1%;
  height: 98%;
  margin-top: 1%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
  border-radius: 3px;
}
.btm-top {
  height: 6%;
  width: 100%;
  background-color: rgba(238, 238, 238, 1);
  border-radius: 5px;
}
.btm-mid {
  height: 61%;
  width: 98%;
  margin-left: 1%;
  margin-top: 1%;
  margin-bottom: 1%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
  border-radius: 3px;
}
.btm-mid-all {
  height: 100%;
  width: 100%;
}
.btm-mid-top {
  height: 9%;
  width: 100%;
  background-color: rgba(238, 238, 238, 1);
  border-radius: 5px;
}
.btm-mid-mid {
  height: 75%;
  width: 100%;
  position: relative;
}
.btm-mid-left {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 0%;
}
.btm-left-left1,
.btm-left-left2 {
  height: 100%;
  position: absolute;
  right: 5%;
}
.btm-left-left1 li,
.btm-left-left2 li {
  height: 12.5%;
  text-align: right;
}
.btm-mid-right {
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0%;
}
.btm-right-left1,
.btm-right-left2 {
  position: absolute;
  right: 5%;
  height: 100%;
}
.btm-right-left1 li,
.btm-right-left2 li {
  text-align: right;
  height: 12.5%;
}
.btm-right-right1,
.btm-right-right2 {
  height: 100%;
  left: 5%;
  position: absolute;
  width: 100%;
}
.btm-right-right1 li,
.btm-right-right2 li {
  height: 12.5%;
  width: 100%;
}
.btm-mid-btm {
  height: 16%;
  width: 100%;
}
.btm-mid-btm button {
  position: relative;
  width: 6%;
  height: 60%;
  background-color: rgba(22, 213, 133, 1);
  border-radius: 5px;
  font-size: 16px;
  border: none;
  box-shadow: none;
  left: 50%;
  top: 5%;
}
.btm-btm {
  margin-left: 1%;
  height: 30%;
  width: 98%;
  margin-bottom: 2%;
  box-shadow: 0px 2px 8px rgb(213, 213, 213);
  border-radius: 3px;
}
.btm-btm-top {
  height: 20%;
  width: 100%;
  background-color: rgba(238, 238, 238, 1);
  border-radius: 5px;
}
.btm-btm-btm {
  height: 80%;
  width: 100%;
}
.btm-btm-left {
  height: 100%;
  width: 40%;
  float: left;
}
.btm-btm-left ul {
  position: relative;
  left: 70%;
}

.btm-btm-right {
  width: 60%;
  height: 100%;
  float: left;
}
.btm-btm-right ul {
  position: relative;
  left: 5%;
}
</style>